<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 pt-24 pb-12 px-4 md:px-6">
    <!-- 页面标题 -->
    <div class="max-w-3xl mx-auto mb-10 text-center">
      <h1 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold text-gray-900 dark:text-white mb-3">
        充值海龟币
      </h1>
      <p class="text-gray-600 dark:text-gray-400">
        选择充值套餐，获取更多海龟币，解锁更多游戏内容
      </p>
    </div>

    <!-- 主内容区 -->
    <div class="max-w-4xl mx-auto">
      <!-- 当前余额卡片 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-8 transform transition-all hover:shadow-md">
        <div class="flex flex-col md:flex-row items-center justify-between gap-4">
          <div>
            <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-1">当前余额</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">您的海龟币可用于购买游戏道具和解锁特殊内容</p>
          </div>
          <div class="flex items-center gap-2 bg-blue-50 dark:bg-blue-900/30 px-4 py-3 rounded-lg">
            <i class="fa fa-diamond text-blue-500 text-xl"></i>
            <span class="text-2xl font-bold text-gray-900 dark:text-white">{{ balance }} 海龟币</span>
          </div>
        </div>
      </div>

      <!-- 充值套餐 -->
      <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6 pl-2">选择充值套餐</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-10">
        <!-- 套餐卡片 - 使用v-for循环生成 -->
        <div 
          v-for="(pack, index) in rechargePacks" 
          :key="index"
          class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden transform transition-all hover:shadow-md hover:-translate-y-1 cursor-pointer"
          :class="{'ring-2 ring-blue-500 dark:ring-blue-400': selectedPack === index}"
          @click="selectedPack = index"
        >
          <div class="p-6">
            <div class="flex justify-between items-start mb-4">
              <h3 class="font-bold text-lg text-gray-900 dark:text-white">{{ pack.coins }} 海龟币</h3>
              <span v-if="pack.hot" class="bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 text-xs px-2 py-1 rounded-full">热门</span>
            </div>
            
            <div class="mb-5">
              <span class="text-2xl font-bold text-gray-900 dark:text-white">¥{{ pack.price }}</span>
              <span class="text-sm text-gray-500 dark:text-gray-400 ml-1">{{ pack.unitPrice }} 元/币</span>
            </div>
            
            <div v-if="pack.bonus" class="bg-green-50 dark:bg-green-900/30 text-green-600 dark:text-green-400 text-sm px-3 py-1 rounded-full inline-block mb-4">
              额外赠送 {{ pack.bonus }} 币
            </div>
          </div>
          
          <div class="px-6 py-3 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-700">
            <button 
              class="w-full py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
              @click.stop="handleRecharge(pack)"
            >
              立即充值
            </button>
          </div>
        </div>
      </div>

      <!-- 充值说明 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <h3 class="font-bold text-gray-900 dark:text-white mb-4">充值说明</h3>
        <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
          <li class="flex items-start gap-2">
            <i class="fa fa-info-circle text-blue-500 mt-0.5"></i>
            <span>海龟币是平台内的虚拟货币，可用于购买道具、解锁特殊游戏内容等</span>
          </li>
          <li class="flex items-start gap-2">
            <i class="fa fa-check-circle text-green-500 mt-0.5"></i>
            <span>充值成功后，海龟币将立即添加到您的账户中</span>
          </li>
          <li class="flex items-start gap-2">
            <i class="fa fa-shield text-yellow-500 mt-0.5"></i>
            <span>所有支付均经过加密处理，保障您的支付安全</span>
          </li>
          <li class="flex items-start gap-2">
            <i class="fa fa-headphones text-purple-500 mt-0.5"></i>
            <span>充值遇到问题？请联系<a href="/support" class="text-blue-500 hover:underline">在线客服</a></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
//import { useRouter } from 'vue-router'

//const router = useRouter()
const balance = ref(0)
const selectedPack = ref(null)

// 充值套餐数据
const rechargePacks = [
  {
    coins: 100,
    price: 10,
    unitPrice: '0.10',
    bonus: 10,
    hot: false
  },
  {
    coins: 300,
    price: 28,
    unitPrice: '0.09',
    bonus: 30,
    hot: true
  },
  {
    coins: 500,
    price: 45,
    unitPrice: '0.09',
    bonus: 60,
    hot: false
  },
  {
    coins: 1000,
    price: 88,
    unitPrice: '0.088',
    bonus: 150,
    hot: true
  },
  {
    coins: 2000,
    price: 170,
    unitPrice: '0.085',
    bonus: 350,
    hot: false
  },
  {
    coins: 5000,
    price: 400,
    unitPrice: '0.08',
    bonus: 1000,
    hot: false
  }
]

// 从本地存储加载余额
onMounted(() => {
  const savedBalance = localStorage.getItem('user_balance')
  if (savedBalance) {
    balance.value = Number(savedBalance)
  } else {
    // 如果没有存储的余额，默认设置为0
    balance.value = 0
  }
})

// 处理充值
const handleRecharge = (pack) => {
  // 模拟支付过程
  // 在实际项目中，这里应该调用后端API进行支付处理
  
  // 显示确认信息
  if (confirm(`确认充值 ${pack.coins} 海龟币，需要支付 ¥${pack.price} 元？`)) {
    // 计算新余额（原有余额 + 套餐币数 + 赠送币数）
    const newBalance = balance.value + pack.coins + (pack.bonus || 0)
    
    // 更新本地存储
    localStorage.setItem('user_balance', newBalance)
    
    // 更新充值记录
    const records = JSON.parse(localStorage.getItem('recharge_records') || '[]')
    records.unshift({
      id: Date.now(),
      coins: pack.coins,
      bonus: pack.bonus || 0,
      total: pack.coins + (pack.bonus || 0),
      price: pack.price,
      date: new Date().toLocaleString('zh-CN')
    })
    localStorage.setItem('recharge_records', JSON.stringify(records))
    
    // 更新界面显示的余额
    balance.value = newBalance
    
    // 显示成功消息
    alert(`充值成功！您已获得 ${pack.coins} 海龟币，额外赠送 ${pack.bonus || 0} 海龟币，当前余额：${newBalance} 海龟币`)
    
    // 可选择跳转到其他页面，如商城
    // router.push('/shop')
  }
}
</script>
    